<template>
  <div class="backBox">
    <div class="boxOne">
      <div class="oneItem">
        <div class="oneitemTop">今日工作量</div>
        <div class="oneitemBot">
          <span>样本采集：0 个</span>
          <span style="margin-top: 6px;">DNA提取：0 个</span>
          <span style="margin-top: 6px;">样本检测：0 个</span>
        </div>
      </div>
      <div class="oneItem">
        <div class="oneitemTop">今日检测结果</div>
        <div class="oneitemBot" style="color: #FFA07A;">
          <span>smn_17阳性：0 个</span>
          <span style="margin-top: 6px;">smn_18阳性：0 个</span>
          <span style="margin-top: 6px;">检测结果阳性：0 个</span>
        </div>
      </div>
      <div class="oneItem">
        <div class="oneitemTop">冰箱数量：0 台</div>
        <div class="oneitemBot" style="color: #303133;">
          <span>冻存架个数：0 个</span>
          <span style="margin-top: 6px;">冻存盒个数：0 个</span>
          <span style="margin-top: 6px;">冻存盒总孔数：0 个</span>
        </div>
      </div>
      <div class="oneItem">
        <div class="oneitemTop">样本总数量：0 个</div>
        <div class="oneitemBot" style="color: #303133;">
          <span>容器占用率：0 %</span>
          <span style="margin-top: 6px;">样本阳性率：0 %</span>
          <span style="margin-top: 6px;">今日阳性率：0 %</span>
        </div>
      </div>
    </div>
    <div class="boxTwo"></div>
    <div class="boxThree">
      
    </div>
  </div>
</template>

<script lang="ts" setup>
const progress = 10; // 初始进度为10%
</script>

<style scoped lang="scss">
.backBox {
  width: 100%;
  margin: 0 auto;
  min-height: 100%; /* 改为 min-height 而不是固定 height */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  box-sizing: border-box;
}

.boxOne {
  width: 96%;
  height: 190px;
  display: flex;
  justify-content: space-between;
}

.oneItem {
  width: 24%;
  height: 100%;
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.oneitemTop {
  width: 100%;
  height: 26%;
  border-bottom: 1px solid #E6E6E6;
  display: flex;
  align-items: center;
  padding-left: 20px;
  box-sizing: border-box;
  color: #17B2A2;
  font-size: 15px;
}

.oneitemBot {
  width: 100%;
  height: 74%;
  padding-left: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #32CD32;
  font-size: 15px;
}

.boxTwo {
  width: 96%;
  height: 400px;
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.1);
  margin-top: 22px;
  border-radius: 4px;

}
.boxThree {
  width: 96%;
  height: 400px;
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
}
.threeLeft{
  width: 49%;
  height: 100%;
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
.threeRight{
  width: 49%;
  height: 99%;
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  text-align: center;
  padding: 20px 50px 50px 50px;
  box-sizing: border-box;
}

.progress-container {
  width: 200px;
  height: 200px;
}

.progress-svg {
  width: 100%;
  height: 100%;
}
</style>
